<form id="userForm" class="form-horizontal" action="${contextPath}/admin/user/save" method="post">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h5 class="blue">编辑用户</h5>
    </div>

    <div class="modal-body">
        <input type="hidden" name="user.id" id="id" value="${user.id!}"/>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="username">用户名:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <input type="text" name="user.username" id="username" class="col-xs-12 col-sm-4 required" value="${user.username!}"/>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="nickname">昵称:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <input type="text" name="user.nickname" id="nickname" class="col-xs-12 col-sm-4 required" value="${user.nickname!}"/>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="name">姓名:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <input type="text" name="user.name" id="name" class="col-xs-12 col-sm-4 required" value="${user.name!}"/>
                </div>
            </div>
        </div>

        <div class="hr hr-dotted"></div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email">邮箱:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <span class="input-icon input-icon-right">
                        <input type="email" name="user.email" id="email" value="${user.email!}" class="required email"/>
                        <i class="ace-icon fa fa-envelope"></i>
                    </span>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="mobile">手机:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <span class="input-icon input-icon-right">
                        <input type="text" name="user.mobile" id="mobile" value="${user.mobile!}" class="required"/>
                        <i class="ace-icon fa fa-phone"></i>
                    </span>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right">性别:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <label class="radio-inline blue"><input name="user.sex" value="0" type="radio" class="ace" <#if !user.sex?? ||(user.sex?? && user.sex = '0')>checked="checked"</#if>/><span class="lbl">男</span></label>
                    <label class="radio-inline blue"><input name="user.sex" value="1" type="radio" class="ace" <#if user.sex?? && user.sex = '1'>checked="checked"</#if>/><span class="lbl">女</span></label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="birthday">生日:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="input-medium input-group">
                    <span style="position: relative; z-index: 9999;">
                    <input type="text" name="user.birthday" id="birthday" class="input-medium date-picker" value="${user.birthday!}" data-date-format="yyyy-mm-dd"/>
                    </span>
                    <span class="input-group-addon"> <i class="ace-icon fa fa-calendar"></i></span>
                </div>
            </div>
        </div>

        <div class="hr hr-dotted"></div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right">用户类型:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <select class="input-medium" id="type" name="user.type">
                        <option value="0" <#if user.type?? && user.type = '0'>selected="selected"</#if>>普通用户</option>
                        <option value="1" <#if user.type?? && user.type = '1'>selected="selected"</#if>>管理员</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right">状态:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <label class="radio-inline blue"><input name="user.enable" value="0" type="radio" class="ace" <#if !user.enable?? || (user.enable?? && user.enable = '0')>checked="checked"</#if>/><span class="lbl">启用</span></label>
                    <label class="radio-inline blue"><input name="user.enable" value="1" type="radio" class="ace" <#if user.enable?? && user.enable = '1'>checked="checked"</#if>/><span class="lbl">禁用</span></label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right">角色:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <#list roleList as role>
                        <!--<div class="checkbox">-->
                            <label class="radio-inline <#if role.enable == '1'>red<#else>green</#if>"> <input name="rids" value="${role.id}" type="checkbox" class="ace"<#if role.enable == '1'> disabled="disabled"</#if><#if roleStr?index_of("-"+role.id?string+"-") != -1> checked="checked"</#if>/> <span class="lbl"> ${role.name}</span>
                            </label>
                        <!--</div>-->
                    </#list>
                </div>
            </div>
        </div>

    </div>

    <div class="modal-footer center">
        <button type="submit" class="btn btn-sm btn-success"><i class="ace-icon fa fa-check"></i> 保存</button>
        <button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> 取消</button>
    </div>
</form>
<script src="${contextPath}/static/admin/assets/js/jquery.validate.js"></script>
<script src="${contextPath}/static/admin/assets/js/jquery.validate.messages_zh.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".date-picker").datepicker({
            language : 'zh-CN',
            autoclose: true,
            todayHighlight: true
        });

        $("#userForm").validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: true,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                    var controls = element.closest('div[class*="col-"]');
                    if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                    else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                }
                else if(element.is('.select2')) {
                    error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                }
                else if(element.is('.chosen-select')) {
                    error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                }
                else error.insertAfter(element.parent());
            },

            submitHandler: function (form) {
                form.submit();
            },
            invalidHandler: function (form) {
            }
        })
    });
</script>